<template>
  <div style="margin-left:14px">
    <a-list 
        :grid="{ gutter: 2, column: 2 }" 
        :data-source="stockList" 
        ref="stockListGrid"
        :style="containerStyle"
        class="w-full stock-list-grid"
        :loading="listLoading">
        <template #renderItem="{ item }">
            <a-list-item>
                <!--多股Item组件 -->
                <div :style="itemListStyle">
                  <klineCard :stockCode="item.stockCode" :stockName="item.stockName"></klineCard>
                </div>
            </a-list-item>
        </template>
      </a-list>
      <div class="flex justify-end" style="position: fixed; bottom: 16px;right:12px;">
        <a-pagination v-model:current="pagination.pageNo" v-model:page-size="pagination.pageSize" 
          :page-size-options="pageSizeOptions"
          :total="pagination.total" show-size-changer @change="pageChange">
          <template #buildOptionText="props">
            <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
            <span v-else>全部</span>
          </template>
        </a-pagination>
      </div>
  </div>
</template>
<script lang="ts">
  import { Input, Button, List, ListItem, Pagination } from 'ant-design-vue';
  import { message } from 'ant-design-vue';
  export default {
    components: {
      AButton: Button,
      AInput: Input,
      AList: List,
      AListItem: ListItem,
      APagination: Pagination
    },
  };
</script>
<script lang="ts" setup>
  import { ref, onMounted, onUnmounted} from 'vue';
  import klineCard from './kline_card.vue';
  import { getStocks } from '/@/api/stock/stockDailyDao';

  const listLoading = ref(false);
  const stockListGrid = ref();
  const itemListStyle = ref({
    "width": '100%',
    "height": '250px',
    'display':'grid',
  });
  const containerStyle = ref({
    'height': '100%'
  })

  const stockCode = ref('');
  const filterZbs = ref('');
  const columnOrders = ref();

  const props = defineProps({
    stockCode: {
      type: String
    },
    filterZbs: {
      type: String
    },
    columnOrders: {
      type: Object
    },
    containerHeight:{
      type: Number
    }
  });

  const pagination = ref({
    pageNo:1,
    pageSize:4,
    total:0
  });

  async function searchStockList(){
    var queryParam = {
      "pageNo":pagination.value.pageNo,
      "pageSize":pagination.value.pageSize,
      "stockCode": stockCode.value
    }
    if (columnOrders.value) {
      queryParam['order'] = columnOrders.value.order ? (columnOrders.value.order == 'ascend' ? "asc" : "desc") : "";
      queryParam['orderBy'] = columnOrders.value.columnKey ? columnOrders.value.columnKey : ""
    }
    if (filterZbs.value) {
      queryParam['tiaojianList'] = filterZbs.value;
    }
    listLoading.value = true;
    let response = await getStocks({},queryParam);
    let datas = response['data'];
    let resultCode = response['resultCode'];
    listLoading.value = false;
    if(resultCode=='FAIL') {
      message.error(response['msg']);
      return;
    }
    pagination.value.pageNo = datas['pageNo'];
    pagination.value.total = datas['count'];
    stockList.value = datas['list'];
    listLoading.value = false;
  };

  function searchStockListByStockCode(searchCode) {
    stockCode.value = searchCode;
    stockList.value = [];
    searchStockList();
  }

  defineExpose({searchStockListByStockCode});
  onMounted(()=>{
    stockCode.value = props.stockCode;
    filterZbs.value = props.filterZbs;
    columnOrders.value = props.columnOrders;
    searchStockList();
    itemListStyle.value.height = (window.innerHeight - 180)/2+'px';
  });
  
  const stockList = ref([]);
  const pageSizeOptions = ref<string[]>(['6', '9', '12', '15', '30']);


  function pageChange(value) {
    pagination.value.pageNo = value;
    stockList.value = [];
    searchStockList();
  }
</script>

<style scoped>

</style>